<template>
	<view class="report-page">
		<u-navbar title="人力申报" back-icon-color="#fff" title-color="#fff" :background="background">
			<view class="navbar-right" slot="right">
				<view class="dot-box right-item" @click="historyList">
					<u-image shape="square" ref="uImage" width="40" height="40" src="../../static/icon/history-icon.png" mode="aspectFill">
					</u-image>
				</view>
			</view>
		</u-navbar>
		
		<!-- 秦隆提供的食材支出 -->
		<view class="report-content bg-white">
			<view class="total-title">
				人工成本
			</view>
			
			<view class="">
				<view class="content-items" v-for="(item, index) in postData" :key="index">
					<view class="row-between item-top" @click="clickDevelop" :data-index="index">
						<view>
							<text class="required-color">*</text>
							<text class="ml20 bold lg">{{item.job_name}}</text>
						</view>
						<view>
							<u-icon :name="item.is_show ? 'arrow-up' : 'arrow-down'" color="#e89c38" size="16px" ></u-icon>
						</view>
					</view>
					
					<view class="row-between item-bottom" v-show="item.is_show">
						<view class="row total-input">
							<view class="mr20">定岗</view>
							<u-input :inputAlign="inputAlign" height="40" v-model="item.ren_nums" placeholder="人数" :type="type" :border="border" />
							<view class="ml20">人</view>
						</view>
						<view class="row total-input">
							<view class="mr20">薪酬</view>
							<u-input :inputAlign="inputAlign" height="40" v-model="item.wage" placeholder="金额" :type="type" :border="border" />
							<view class="ml20">元</view>
						</view>
					</view>
				</view>
				
			</view>
		</view>
		
		<!-- 提交按钮 -->
		<view class="submit-btn white" @click="submitBtn">
			<view class="submit-btn-content row-center">
				提交
			</view>
		</view>
	</view>
</template>
 
<script>
	export default {
		data() {
			return {
				type: 'number',
				border: true,
				inputAlign: 'right',
				background: {
					backgroundColor: '#2165F7',
				},
				
				postData: [{
					job_name: '主管',
					ren_nums: '1',
					wage: '',
					is_show: true,
				},{
					job_name: '食品主管',
					ren_nums: '1',
					wage: '',
					is_show: true,
				},{
					job_name: '安全主管',
					ren_nums: '1',
					wage: '',
					is_show: true,
				},{
					job_name: '辅导员（全）',
					ren_nums: '1',
					wage: '',
					is_show: true,
				},{
					job_name: '辅导员（兼）',
					ren_nums: '1',
					wage: '',
					is_show: true,
				},{
					job_name: '保育员',
					ren_nums: '1',
					wage: '',
					is_show: true,
				},{
					job_name: '午/晚托管理费',
					ren_nums: '1',
					wage: '',
					is_show: true,
				},{
					job_name: '厨师长',
					ren_nums: '1',
					wage: '',
					is_show: true,
				},{
					job_name: '二厨',
					ren_nums: '1',
					wage: '',
					is_show: true,
				},{
					job_name: '面点',
					ren_nums: '1',
					wage: '',
					is_show: true,
				},{
					job_name: '帮厨',
					ren_nums: '1',
					wage: '',
					is_show: true,
				},{
					job_name: '保洁',
					ren_nums: '1',
					wage: '',
					is_show: true,
				},{
					job_name: '其他',
					ren_nums: '1',
					wage: '',
					is_show: true,
				}]
			}
		},
		methods: {
			historyList: function() {
				uni.navigateTo({
					url: '/pages/finance/reportLaborList'
				})
			},
			addItem() {
				let add = {
					index_id: parseInt(this.otherId)+1,
					spending: '',
					actual_amount: '',
				}
				this.postData.otherList.push(add)
				this.otherId = parseInt(this.otherId)+1
			},
			delConfirm() {
				let _this = this;
				_this.postData.otherList = _this.postData.otherList.filter((i) => {
					return i != _this.delOtherId
				})
			},
			delItem(item) {
				this.delOtherId = item;
				this.deleteShow = true;
			},
			// 校验数据
			submitBtn() {
				let _this = this;
				let {
					postData
				} = _this;
				postData.forEach(function(item, index) {
					if(!_this.isNull(item.wage)) {
						item.wage = 0;
					}
				})

				// try{
				// 	postData.forEach(function(item, index) {
				// 		if(!_this.isNull(item.ren_nums)) {
				// 			throw new Error(item.job_name+"的定岗为空");//报错，就跳出循环
				// 		}
				// 		if(!_this.isNull(item.wage)) {
				// 			throw new Error(item.job_name+"的薪酬为空");//报错，就跳出循环
				// 		}
				// 	})
				// }catch(e){
				// 	let _error_msg = e.message;
					
				// 	uni.showToast({
				// 		title: _error_msg,
				// 		icon: "none"
				// 	})
				// 	return false
				// }
				
				uni.showModal({
					title: '提示',
					content: '您确定提交该人力账单吗？',
					cancelText: "取消", // 取消按钮的文字  
					confirmText: "确定", // 确认按钮文字  
					showCancel: true, // 是否显示取消按钮，默认为 true
					success: (res) => {
						if(res.confirm) {  
							_this.postFunc();
						} else {
							console.log('else', res)
						}  
					} 
				})
			},
			
			// 数据提交
			postFunc: function() {
				let postData = this.postData;
				let new_post = [];
				postData.forEach(function(item, index) {
					let _tmp = {};
					_tmp.job_name = item.job_name;
					_tmp.ren_nums = item.ren_nums;
					_tmp.wage = item.wage;
					new_post.push(_tmp)
				})
				
				this.$u.post('api/finance/addFinanceJob', {addData: new_post}).then(res => {	
					
					uni.redirectTo({
						url: '/pages/finance/reportLaborList',
						success() {
							console.log(123);
						},
						fail(e) {
							console.log(e);
						}
					})
				})
			},
				
			clickDevelop: function(e) {
				let _this = this;
				let _index = e.currentTarget.dataset.index;
				_this.postData[_index].is_show = !_this.postData[_index].is_show;
			},
			isNull(value) {
				if(value == '' || value == 0 || value == undefined) {
					return false;
				}
				return true;
			}
		}
	}
</script>
 
<style lang="scss">
	page {
		background-color: #f6f6f6;
		padding-bottom: 60rpx;
	}
	.report-page {
		.navbar-right {
			margin-right: 24rpx;
			display: flex;
		}
		
		.right-item {
			margin: 0 12rpx;
			position: relative;
			color: #ffffff;
			display: flex;
		}
		
		.total-title {
			position: relative;
			font-size: 36rpx;
			font-weight: bold;
			padding: 0 20rpx;
			
			&:before {
				content: "";
				position: absolute;
				top: 0;
				bottom: 0;
				left: 0;
				margin: auto 0;
				width: 6rpx;
				height: 30rpx;
				background-color: #2045fc;
			}
		}
		
		.total-input {
			width: 45%;
			font-size: 26rpx;
			padding: 0 40rpx;
		}
		
		.report-total {
			padding: 10rpx 20rpx;
			
			.total-title {
				padding: 0 0;
				
				&:before {
					left: -20rpx;
				}
			}
			
			.total-input {
				padding-right: 10rpx;
			}
		}
		
		.report-content {
			.content-items {
				border-bottom: 2rpx solid #f6f6f6;
				
				&:last-child {
					border-bottom: none;
				}
				
				.item-top{
					padding: 20rpx;
				}
				
				.item-bottom{
					color: #666666;
					padding: 20rpx;
					border-top: 2rpx solid #f6f6f6;
				}
			}
		}
		
		.report-other {
			padding: 10rpx 0;
			margin-top: 30rpx;
			
			.item-box{
				padding: 16rpx 30rpx;
				border-bottom: 2rpx solid #f6f6f6;
				
				.item-child-one {
					position: relative;
					
					&:after {
						content: "";
						position: absolute;
						top: 0;
						bottom: 0;
						right: -20rpx;
						margin: auto 0;
						width: 2rpx;
						height: 60rpx;
						background-color: #F6F6F6F6
					}
				}
			}
			
			.other-btn {
				padding: 20rpx;
				color: #2045fc;
			}
		}
		
		.submit-btn {
			margin: 30rpx;
			.submit-btn-content {
				width: 100%;
				padding: 20rpx;
				background-color: #2045fc;
				border-radius: 50rpx;
				box-shadow: 0px 3px 10px rgba(32, 69, 252, 0.5);
			}
		}
		
	}
	
</style>